import styles from '../styles.less';
import { Image, Pagination, Table } from 'antd';
import { useCallback, useEffect } from 'react';
import { connect } from 'umi';
import { nowrapColumns } from '@/utils/utils';

const DataTable = (props) => {

  const { dispatch, dataTable, loading } = props;
  const { tablePayload, setTablePayload } = props.data;

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    dispatch({
      type: 'POrderVerify/fetchPage',
      payload: payload,
    });
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList(tablePayload);
  }, [fetchList, tablePayload]);

  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center',
      fixed: 'left',
      render: ({}, {}, index) => (
        <span>
          {(tablePayload.pageNum - 1) * tablePayload.pageSize + index + 1}
        </span>
      ),
    },
    {
      title: '商品详情',
      dataIndex: 'userOrderDetail',
      align: 'center',
      ellipsis: true,
      width: 300,
      render: (_, record) => {
        if (!record.userOrderDetail) {
          return '暂无';
        }
        let data = record.userOrderItem ? record.userOrderItem : record.userOrderDetail;
        return (
          <div style={{ display: 'flex', alignItems: 'center', width: 300 }}>
            <Image
              width={44} height={44} src={data.cover}
              fallback=""
            />
            <div style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-around',
              padding: '0 12px',
            }}>
              <div style={{
                fontSize: 10,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap',
              }}>{data.title}</div>
              <div style={{
                color: '#888',
                fontSize: 10,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap',
              }}>{data.subTitle}</div>
            </div>
          </div>
        );
      },
    }, {
      title: '用户信息',
      dataIndex: 'userInfo',
      align: 'center',
      ellipsis: true,
      width: 200,
      render: (_, record) => {
        if (!record.userInfo) {
          return '暂无';
        }
        return (
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Image
              style={{ width: 44, height: 44 }} src={record.userInfo.avatar}
              fallback=""
            />
            <div style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-around',
              marginLeft: 12,
            }}>
              <div style={{
                width: 148,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap',
              }}>{record.userInfo.name}</div>
              <div style={{
                width: 148,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap',
              }}>{record.userInfo.realName}</div>
              <div style={{
                color: '#888',
                width: 148,
                fontSize: 12,
                textAlign: 'left',
                wordBreak: 'break-all',
                wordWrap: 'break-word',
                whiteSpace: 'pre-wrap',
              }}>{record.userInfo.mobile}</div>
            </div>
          </div>
        );
      },
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      align: 'center',
    },
    {
      title: '核销人员',
      dataIndex: 'verifyNickname',
      align: 'center',
    },
    {
      title: '核销手机',
      dataIndex: 'verifyMobile',
      align: 'center',
    },
    {
      title: '核销数量',
      dataIndex: 'verifyNum',
      align: 'center',
    },
    {
      title: '核销商家',
      dataIndex: 'mchName',
      align: 'center',
    },
    {
      title: '核销时间',
      dataIndex: 'verifyTime',
      align: 'center',
    },
    {
      title: '套餐名称',
      dataIndex: 'pkgTitle',
      align: 'center',
    },
  ];

  return (
    <>
      <div className={styles.myDataTable}>
        <Table
          className={styles.myTable} bordered={false} size={'middle'} columns={nowrapColumns(columns, dataTable.list)}
          dataSource={dataTable.list} rowKey={'id'}
          pagination={false} scroll={{ y: '100%' }} loading={loading}
        />
      </div>
      <Pagination
        pageSize={tablePayload.pageSize} current={tablePayload.pageNum} total={dataTable.total}
        className={styles.myPagination} size={'default'} hideOnSinglePage={false}
        showTotal={(total) => {
          return `共 ${total} 条记录`;
        }}
        pageSizeOptions={[15, 30, 60, 120]}
        showSizeChanger showQuickJumper={true}
        onChange={(page, pageSize) => {
          setTablePayload({ ...tablePayload, pageNum: page, pageSize: pageSize });
        }}
      />
    </>

  );
};

export default connect(({ loading, POrderVerify }) => {
  return {
    loading: loading.effects['POrderVerify/fetchPage'],
    dataTable: POrderVerify.dataTable,
  };
})(DataTable);
